<template>
    <div class="container">
        <div class="row">
<!--            <h1 style="color: red">Person 组件总人数为：{{$store.state.personList.length}}</h1>-->
<!--            <h1>当前求和为：{{$store.state.sum}}</h1>-->
<!--            <h1>当前求和放大10倍：{{$store.state.sum*10}}</h1>-->
<!--            <h1>当前求和放大10倍：{{$store.getters.bigSum}}</h1>-->
<!--            <h1>我在{{$store.state.school}},学习{{$store.state.subjects}}</h1>-->
            <hr>
            <h1>当前求和为：{{a.sum}}</h1>
            <h1>当前求和放大10倍：{{a.sum*10}}</h1>
            <h1>当前求和放大10倍：{{bigSum}}</h1>
            <h1>我在{{a.school}},学习{{a.subjects}}</h1>
            <select v-model.number="n"> <!-- .number 强制数字转换-->
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
            </select>
            <button @click="increment(n)">+</button>
            <button @click="decrement(n)">-</button>
            <button @click="incrementOdd(n)">当前求和为奇数再加</button>
            <button @click="incrementWait(n)">等一等再加</button>
        </div>
    </div>
</template>
<script>
import {mapGetters, mapState, mapMutations, mapActions} from "vuex";
export default {
    name: "Count",
    data(){
        return {
            n: 1
        }
    },
    methods:{
        ...mapMutations('a',{increment:'JIA',decrement:'JIAN'}),
        ...mapActions('a',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    },
    computed:{
        ...mapState(['a','b']),
        ...mapGetters('a',['bigSum']),
    }
}
</script>

<style>
.container{
    display: flex;
    justify-content: space-around;
}
</style>
